<template>
  <div>
      <Swipe ></Swipe>

<!--     选择-->
    <div class="buttom">
      <div
        v-for="(item, index) in items"
        :key="index"
        class="item"
        :class="{ active: selectIndex === index }"
        @click="toggleSelect(index)"
      >
       <div class="icon"> <van-icon :name="item.name" size="35"/></div>
        <div>{{ item.text }}</div>
      </div>
    </div>
<!--    通知栏-->
    <van-notice-bar
      style="margin: 10px"
      left-icon="volume-o"
      text="无论我们能活多久，我们能够享受的只有无法分割的此刻，此外别无其他。"
    />
<!--    水族介绍-->
    <div >
      <van-cell-group class="card" >
        <div class="header-text">水族介绍</div>
        <van-row class="yy-list" justify="space-around" align="stretch" :gutter="20">
          <!-- 左侧图片 -->
          <van-col span="12" class="left-col">
            <van-image
              src="./34.webp"
              alt="水族图片"
              class="left-image"
            />

          </van-col>

          <!-- 右侧内容 -->
          <van-col span="12" class="right-col">
            <div>
              <div class="right-content">
                <div class="right-top">
                  <h4>节日</h4>
                  <div>
                    水族的岁时节日有20多个，如端节（借端、吃端）、卯节（借卯）、额节（借额）、苏宁喜（借宁喜）、敬霞节（敬霞、拜霞）、春节（借荐）、清明节（挂青、挂社）、端午节（借王）、铜鼓节、洗澡节（六月六）、黄饭节、花椒节、二月二祭白龙、三月祭龙节、六月祭土地、六月祭山神、七月半、七月接送老祖、中秋节、重阳节、十月舂牛粑、拜庙（拜菩萨、拜哥善、拜善）、宇魉（韵娘）、吃新节（借咬里、借熬利。
                  </div>
                </div>
              </div>
              <div class="right-content" style="margin-top: 10px">
                <div class="right-top">
                  <h4>习俗</h4>
                  <div>
                    水族崇拜鱼，鱼是大多数水族地区的图腾崇拜物。水塘养鱼、稻田养鱼是水族地区的重要技能与特色，人们运用田鱼产卵和用稻草团分卵繁殖的技能，掌握洪水及野兽对渔业危害的方法，使鱼稻获得双丰收。所以，饭稻羹鱼成为水族的传统习俗
                  </div>
                </div>
              </div>
            </div>

          </van-col>
        </van-row>
      </van-cell-group>
    </div>
<!--    贡献墙-->
    <div class="quit">
      <van-button plain type="primary" class="quit_text" size="large" >贡献墙</van-button>
    </div>
<!--    热门推荐-->

    <div>
      <div class="recommend">热门推荐</div>
    <div class="recommendList">
      <van-row justify="space-around" >
        <van-col span="11" v-for="(item,index) in listData" :key="index" style="margin-top: 10px">
          <div class="list-left">
            <van-image height="157" :src="item.image"></van-image>
            <div class="list-tag">{{ item.tag }}</div>
            <h3>{{ item.title }}</h3>
            <div class="jianjie">
              {{item.jianjie }}
            </div>
            <div class="shuju">
              <div><van-icon name="chat-o" /> <span>{{item.pinglun}}</span></div>
              <div><van-icon name="eye-o"  /> <span>{{ item.chakan }}</span></div>
            </div>
          </div>

        </van-col>
<!--        <van-col span="11">-->
<!--          <div class="list-left">-->
<!--            <van-image height="157" src="./121.jpeg"></van-image>-->
<!--            <div class="list-tag">水话</div>-->
<!--            <h3>水话标题</h3>-->
<!--            <div class="jianjie">-->
<!--              简介简介简介简介简介简介简介 简介简介简介简介简介简介简介-->
<!--            </div>-->
<!--            <div class="shuju">-->
<!--              <div><van-icon name="chat-o" /> <span>2</span></div>-->
<!--              <div><van-icon name="eye-o"  /> <span>444444</span></div>-->
<!--            </div>-->
<!--          </div>-->

<!--        </van-col>-->

      </van-row>
    </div>


    </div>

  </div>

</template>

<script setup>
import Swipe from "../../components/Swipe.vue";
import {ref,reactive} from 'vue'
// 当前选中的索引（-1 表示未选中）
const selectIndex = ref(-1)
const items = ref([
  { text: "水书",name:'envelop-o' },
  { text: "水话",name:'location-o' },
  { text: "服装" ,name:'user-o'},
  { text: "马尾绣" ,name:'user-o'},
  { text: "山歌",name:'envelop-o' },
  { text: "游戏" ,name:'location-o'},
  { text: "地图" ,name:'flag-o'},
  { text: "" }, // 空项
]);

//当选择某一个的时候，将该字体颜色设置为蓝色
const toggleSelect = ( index ) => {
  selectIndex.value = selectIndex.value === index ? -1 : index;
}
// 热门推荐的数据
const listData = reactive([
  {image:'./121.jpeg',tag:'水话',title:"水话标题",jianjie:'水族水话翻译 水话是中国少数民族水族的语言，属于汉藏语系壮侗语族侗水语支。',pinglun:10,chakan:3000},
  {image:'./123213.jpeg',tag:'山歌',title:"视频标题",jianjie:'截止至2000年，水语使用人口将近40万。。',pinglun:40,chakan:3900},
  {image:'./121.jpeg',tag:'水话',title:"水话标题",jianjie:'水族水话翻译 水话是中国少数民族水族的语言，属于汉藏语系壮侗语族侗水语支。',pinglun:10,chakan:3000},
  {image:'./123213.jpeg',tag:'山歌',title:"视频标题",jianjie:'截止至2000年，水语使用人口将近40万。。',pinglun:40,chakan:3900},
  {image:'./121.jpeg',tag:'水话',title:"水话标题",jianjie:'水族水话翻译 水话是中国少数民族水族的语言，属于汉藏语系壮侗语族侗水语支。',pinglun:10,chakan:3000},
  {image:'./123213.jpeg',tag:'山歌',title:"视频标题",jianjie:'截止至2000年，水语使用人口将近40万。。',pinglun:40,chakan:3900},


])
</script>
<style scoped lang="less">
.buttom{
  display: flex;
  flex-wrap: wrap; /* 允许换行 */
  justify-content: space-between; /* 水平均匀分布 */
  gap: 10px; /* 可选：增加间距 */
  //padding: 10px; /* 可选：内边距 */
  margin-top: 10px;
  .item{
    flex: 0 0 calc(25% - 10px); /* 每行4个（25%宽度），减去间隙 */
    box-sizing: border-box; /* 确保 padding 和 border 不影响宽度 */
    margin-bottom: 10px; /* 可选：行间距 */
    text-align: center; /* 文字居中 */
    .icon{
      color: #1684fc;
      font-size: 16px;
    }
    &.active {
      color: #1684fc; /* 选中时深蓝色 */
      font-weight: bold; /* 可选：加粗显示 */
    }
  }

}
.card {
  margin: 15px 0;
  padding: 10px;

  .header-text {
    padding-left: 5px;
    line-height: 30px;
    font-size: 16px;
    font-weight: bold;
    border-left: 4px solid red;
  }
}
.card {
  margin: 10px;
  border-radius: 8px;
  overflow: hidden;
}

.header-text {
  padding: 10px;
  font-size: 16px;
  font-weight: bold;
}

.yy-list {
  display: flex;
  align-items: stretch; /* 关键：让左右两侧高度一致 */
  margin-top: 10px;
}

.left-col {
  display: flex;
  align-items: center; /* 图片垂直居中 */
  justify-content: center; /* 图片水平居中 */
  //background: #f5f5f5; /* 可选：背景色 */
  height: 200px; /* 固定高度（可选） */
}

.left-image {
  width: 100%; /* 图片宽度自适应 */
  height: 200px; /* 高度自适应 */
  max-height: 100%; /* 防止图片溢出 */
  object-fit: cover; /* 保持图片比例 */
}

.right-col {
  display: flex;
  flex-direction: column; /* 上下排列 */
  justify-content: center; /* 垂直居中 */
  //padding: 10px;
  //margin-left: 5px;

}


.right-content {
  height:90px; /* 填满右侧区域 */
  display: flex;
  flex-direction: column;
  justify-content: center; /* 上下部分均匀分布 */
  align-items: center;
  border: 1px solid #eee;
  border-radius: 5px;
  background: #fee4e7;

}

.right-top {
  font-size: 10px;
  //font-weight: bold;
  //border: 1px solid #f00;
  padding: 5px;
  white-space: wrap; /* 禁止文本换行 */
  overflow: hidden; /* 隐藏超出部分 */
  text-overflow: ellipsis; /* 超出部分显示省略号 */

}

.right-bottom {
  font-size: 14px;
  color: #666;
  //border: 1px solid #f00;
}
.quit {
  width: 90%;
  margin: 20px;
  margin-top: -10px;
}

.quit_text {
  margin:10px 0;
  text-align: center;
}
.recommend{
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  margin-top: 10px;

}
.recommendList{
  margin-top: 10px;
}
.list-left{
  border: 1px solid #ccc;
  border-radius: 4px;
  position: relative;
  h3{
    margin-top: 5px;
  }
  .jianjie{
    margin-top: 5px;
    //width: 200px; /* 设定一个宽度，方便观察效果 */
    white-space: nowrap; /* 禁止文本换行 */
    overflow: hidden; /* 隐藏超出部分 */
    text-overflow: ellipsis; /* 超出部分显示省略号 */
  }
  .shuju{
    display: flex;
    font-size: 12px;
    margin-top: 10px;
    justify-content: end;
    margin-right: 10px;
    gap: 10px;
  }
}
.list-tag{
  width: 40px;
  font-size: 12px;
  position: absolute;
  top: 140px;
  //border: 1px solid #ccc;
  color: #6bb1fd;
  background: #ffffff;
  text-align: center;
}
.list-right{
  border: 1px solid #f00;
  border-radius: 4px;
}

</style>
